Simple Glossy Navigation Bar Design in Photoshop

Download the self paced mcdst photoshop tutorial to pass comptia network+ exam and become expert web designer with ccna web designing course.

In this tutorial, I will show you how to design a Modern Glossy Navigation Bar in Photoshop. This is a beginner tutorial with a just few simple steps, aiming to help beginner web designer for making their first-ever web page.

Skills involved in this tutorials are selection tools, layer blending options, and some simple gradiant filling techniques.  Have a go!

Here is a preview of the final result of this tutorial:

OK let’s get started!

Step 1

Firstly let’s create some background to work with.

Create a new document sized 1000*600px, use the Gradient Tool (with Foreground colour #333333 and Black ground colour #000000) to fill the background layer.

Step 2

Create a new layer and grab a big round brush (I used a 700px brush) with white color, set its opacity and flow to 50%, do several left-clicks (see image below for details):

Step 3

Create a new layer named “Navi Bar”. Use the Rectangular Marquee Tool to make a selection and fill the selection with Black Colour.

Apply Drop Shadow layer blending option to this layer:

Here is the effect so far:

Step 4

Hold down the Ctrl key and left click on the “Navi Bar” layer to load the selection.

After the selection is loaded, hold down the Alt key and use the Rectangular Marquee tool to make another selection over the existing selection. This will subtract our existing selection.

Step 5

Maintain the selection from the previous step, create a new layer called “glossy” and fill it with White colour. Set the layer opacity and fill opacity to around 30%.

Type some page texts onto the “glossy” layer:

Step 6

Now we can add some mouseover effect! To do this, create a new layer in between the text layer and the “glossy” layer and name it “mouseover”.

Then use the Rectangular Marquee tool to make a selection outside a page text, fill it with White colour and set the layer opacity and fill opacity to around 30% (in layer blending options).

Apply a colour overlay of your choice. I used the following settings:

That’s it for this tutorial! You can add some final touches using preset brushes and apply some texture effects in the background.

Here is my final result of this tutorial:

Hope you enjoy this tutorial and find is useful when you design your own website! If you would like to find how to translater the design into working web pages, study some XHMTL and CSS~ There are plenty of tutorials available on the net about this topic.

If you have any question, just drop me a line below. Thanks and have a nice day :)